import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'


// createApp(App).use(router).mount('#app')

const app = createApp(App)
app.use(ElementPlus)

import { DirectiveBinding } from 'vue'; 
const lazyLoadDirective = {  
    mounted(el: HTMLElement, binding: DirectiveBinding) {  
      // 确保el是一个图片元素  
      if (el.tagName.toLowerCase() === 'img') {  
        const imgElement = el as HTMLImageElement; // 类型断言为HTMLImageElement  
        const originalSrc = imgElement.getAttribute('data-src') || '';  
        const observer = new IntersectionObserver(([entry]) => {  
          if (entry.isIntersecting) {  
            imgElement.src = originalSrc;  
            observer.unobserve(imgElement);  
          }  
        });  
    
        observer.observe(imgElement);  
      }  
    },  
    unmounted(el: HTMLElement) {  
      if (el.tagName.toLowerCase() === 'img') {  
        const imgElement = el as HTMLImageElement;  
        const observer = new IntersectionObserver((_) => {});  
        observer.unobserve(imgElement);  
      }  
    },  
  };  
  export default lazyLoadDirective;

app.directive('lazy',lazyLoadDirective)

app.use(router).mount('#app')

